<div class="layout layout-center-top" id="center1">
    <!-- MVP展示模块 -->
    <div class="mvp-container">
        <!-- 本周MVP -->
        <div class="mvp-card current-week">
            <div class="mvp-header">
                <h3>🏆 本周MVP</h3>
                <span class="date-range">(06.10-06.16)</span>
            </div>
            <div class="mvp-content">
                <div class="avatar">
                    <img src="mvp-avatar1.png" alt="本周MVP">
                </div>
                <div class="mvp-info">
                    <div class="name">张伟</div>
                    <div class="department">研发部</div>
                </div>
            </div>
        </div>

        <!-- 上周MVP -->
        <div class="mvp-card last-week">
            <div class="mvp-header">
                <h3>🎖️ 上周MVP</h3>
                <span class="date-range">(06.03-06.09)</span>
            </div>
            <div class="mvp-content">
                <div class="avatar">
                    <img src="mvp-avatar2.png" alt="上周MVP">
                </div>
                <div class="mvp-info">
                    <div class="name">李晓晓</div>
                    <div class="department">市场部</div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* MVP容器样式 */
    .mvp-container {
        display: flex;
        gap: 20px;
        padding: 20px;
        background: #f8f9fa;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        margin: 20px auto;
        max-width: 800px;
    }

    /* MVP卡片通用样式 */
    .mvp-card {
        flex: 1;
        padding: 20px;
        border-radius: 10px;
        min-width: 300px;
    }

    /* 本周MVP卡片 */
    .current-week {
        background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
        border: 2px solid #ffb74d;
    }

    /* 上周MVP卡片 */
    .last-week {
        background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
        border: 2px solid #bdbdbd;
    }

    /* 头部样式 */
    .mvp-header {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;
    }

    .mvp-header h3 {
        margin: 0;
        font-size: 1.2em;
        color: #333;
    }

    .date-range {
        margin-left: 10px;
        font-size: 0.9em;
        color: #666;
    }

    /* 内容区域 */
    .mvp-content {
        display: flex;
        align-items: center;
    }

    .avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20px;
    }

    .avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mvp-info {
        flex: 1;
    }

    .name {
        font-size: 1.5em;
        font-weight: bold;
        color: #2c3e50;
        margin-bottom: 5px;
    }

    .department {
        color: #7f8c8d;
        font-size: 1.1em;
    }
</style>